<template>
  <div>
    <Modal v-model="modal.add" title="添加" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('addForm', $event)"
      width="1020">
      <Form ref="addForm" :model="form" :label-width="120" :rules="validateRules">
        <Row>
          <i-col span="12">
            <FormItem label="请选择学校" prop="schoolId">
              <Select v-model="form.schoolId" style="width:100%" >
                <Option v-for="item in schoolList" :value="item.id" :key="item.id">{{ item.school }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="抽成" prop="extracting">
              <Input v-model="form.extracting" placeholder="请输入抽成"  />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="抽成类型" prop="type">
              <Input v-model="form.type" placeholder="请输入抽成类型"  />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="描述" prop="descs">
              <Input v-model="form.descs" placeholder="请输入描述" />
            </FormItem>
          </i-col>

        </Row>

      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="resetFormCancelModal('addForm', 'add')">取消</Button>
        <Button type="primary" size="large" @click="add" :loading="loading.add">添加</Button>
      </div>
    </Modal>
    <Modal v-model="modal.edit" title="修改" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('editForm', $event)"
      width="1020">
      <Form ref="editForm" :model="form" :label-width="120" :rules="validateRules">
        <Row>
          <i-col span="12">
            <FormItem label="请选择学校" prop="schoolId" >
              <Select v-model="form.schoolId" style="width:100%" >
                <Option v-for="item in schoolList" :value="item.id" :key="item.id">{{ item.school }}</Option>
              </Select>
            </FormItem>
          </i-col>

          <i-col span="12">
            <FormItem label="抽成" prop="extracting" >
              <Input v-model="form.extracting" placeholder="请输入抽成"  />
            </FormItem>
          </i-col>

          <i-col span="12">
            <FormItem label="抽成类型" prop="type" >
              <Input v-model="form.type" placeholder="请输入抽成类型"  />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="描述" prop="descs" >
              <Input v-model="form.descs" placeholder="请输入描述" />
            </FormItem>
          </i-col>

        </Row>

      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="resetFormCancelModal('editForm', 'edit')">取消</Button>
        <Button type="primary" size="large" @click="edit" :loading="loading.edit">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import * as utils from '@/api/utils-v2'
  import * as ResponseStatus from '@/api/response-status'
  export default {
    name: 'CourierExtractingAddEdit',
    data() {
      return {
        modal: {
          add: false,
          edit: false
        },
        loading: {
          add: false,
          edit: false
        },
        schoolList: {

        },
        urls: {
          addUrl: '/courier-extracting/admin/save',
          schoolListUrl: '/school/any/getList',
          batchAddUrl: '/courier-extracting/admin/batch-save',
          editUrl: '/courier-extracting/admin/update',
          batchEditUrl: '/courier-extracting/admin/batch-update'
        },
        form: {
          schoolId: null,
          extracting: null,
          type: null,
          descs: null,

        },
        validateRules: {
          type: [
            {
              type: 'string',
              required: true,
              message: '此项为必须项',
              trigger: 'blur, change'
            }
          ],
          descs: [
            {
              type: 'string',
              required: true,
              message: '此项为必须项',
              trigger: 'blur, change'
            }
          ],
          // extracting: [
          //   {
          //     type: 'integer',
          //     required: true,
          //     message: '此项为必须项',
          //     trigger: 'blur, change'
          //   }
          //   ]
          // ,
          schoolId: [
            {
              type: 'integer',
              required: true,
              message: '此项为必须项',
              trigger: 'blur, change'
            }
          ]
        },
        dataDictCodes: [],
        dataDictItems: {},
      }
    },
    computed: {},
    mounted() {
      utils.doPostJson(this.urls.schoolListUrl, {}, {}).then(response => {
        if (response.data.code === ResponseStatus.OK) {
          this.schoolList = response.data.data;
        }
      }).catch(error => {
        this.$Message.error('获取学校列表接口请求失败')
      })
    },
    methods: {
      changeModalVisibleResetForm(formRef, visible) {
        if (!visible) {
          this.$refs[formRef].resetFields()
          this.form.id = null
        }
      },
      resetFormCancelModal(formRef, modal) {
        this.modal[modal] = false
        this.$refs[formRef].resetFields()
        this.form.id = null
      },
      add() {
        this.$emit('add')
      },
      edit() {
        this.$emit('edit')
      }
    }
  }
</script>

<style>
</style>
